/*=========================
  CodyChat Dark Night Theme
  Created by Arslan (kiiNg)
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  background-color: #121212;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 2px,
    transparent 2px,
    transparent 6px
  );
  color: #f1f1f1;
  margin: 0;
  padding: 0;
}

/* Header & Sidebar */
.bhead, .bsidebar, .bfoot {
  background: #1b1b1b;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.bsidebar {
  background: #181818;
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* Chat Background */
.back_chat {
  position: relative;
  /* background: #181818; */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.02) 2px,
    rgba(255,255,255,0.02) 0px,
    transparent 0px,
    transparent 5px
  );
  color: #fff;
}

.back_chat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: radial-gradient(ellipse at bottom right, rgba(30,154,255,0.05), transparent 70%); */
  pointer-events: none;
}

/* Input Area */
input, textarea {
  background: none;
  /* border-top: 1px solid #333; */
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  transition: 0.3s ease;
  /* box-shadow: 0px 0px 5px rgb(0 0 0); */
}

input:focus, textarea:focus {
  border-color: #1e9aff;
  box-shadow: 0 0 8px rgba(30,154,255,0.4);
}

/* Buttons */
button {
  background: none;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  /* background: #2aafff; */
  box-shadow: 0 0 10px rgba(30,154,255,0.4);
}

/* Chat Bubbles */
.target_private {
  background: #1e9aff;
  color: #fff;
  border-radius: 14px 14px 14px 2px;
  padding: 10px 14px;
  margin: 6px 0;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.hunter_private {
  background: #2c2c2c;
  color: #f1f1f1;
  border-radius: 14px 14px 2px 14px;
  padding: 10px 14px;
  margin: 6px 0;
  max-width: 70%;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Quote */
.cquote {
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #1e9aff;
  padding: 6px 10px;
  border-radius: 6px;
  color: #c9c9c9;
  margin-top: 4px;
}

/* Online/Offline users */
.user.online { color: #1e9aff; }
.user.offline { color: gray; opacity: 0.6; }

/* Sidebar items */
.bmenu, .submenu {
  background: transparent;
  color: #ccc;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 8px 12px;
  transition: 0.3s ease;
}

.bmenu:hover, .submenu:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #1e9aff;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: #1a1a1a;
}

/* Floating menus */
.float_menu {
  background: rgba(25,25,25,0.9);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Status indicators */
.status_online { color: #0f8c1d; }
.status_busy { color: #bf2c2c; }
.status_away { color: orange; }

/* Notification bubble */
.bnotify {
  background: #bf2c2c;
  color: #fff;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

/* Smooth transitions */
* {
  transition: all 0.2s ease-in-out;
}
.back_box {
  background: rgba(25, 25, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.back_menu {
  background: rgba(25, 25, 25, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.back_panel {
  background: rgba(25, 25, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  height:50px
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.back_modal {
 background: rgba(25, 25, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  
}
.modal_back {
  background-color:#000000a6;
}
.modal_menu {
  background:#141414;
}
.modal_menu_item {
  background:black;
}
.panel_option {
  background: #00000029;
  border-bottom: 2px solid #3d3c3c;
  border-radius: 10px;
}
.selectboxit-options, .selectboxit-list {
  background: rgba(25, 25, 25, 0.9);
  color:white;
  border:1px solid;
}
.selectboxit {
  border:1px solid #8686868f;
}
#private_box {
    background: rgba(25, 25, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}